<template>
  <div class="abnormalData ">
    <!-- 列表查找 -->
    <div class="clearfloat">
      <div class="search-wrap fl">
        <table-search
            ref="table-search"
            :selectHead="selectHead"
            @searchMethods="searchMethods">
        </table-search>
      </div>
      <span class="down-execel fr" @click="exportExcel('异常数据表')">
        <i class="el-icon-download"></i> <a href="javascript:;">导出列表</a>
      </span>
    </div>
    

    <el-table
      ref="tableRef"
      :data="tableData"
      border
      style="width: 100%"
      v-loading="loading"
      @sort-change='tableSortChange'
      height="88%">
      <el-table-column show-overflow-tooltip label="ID" width="60" align="left">
        <template slot-scope="scope">{{(scope.$index+1)+(currentPage-1)*pageSize }}</template>
      </el-table-column>
      <el-table-column show-overflow-tooltip label="订单编号" align="left" prop='order_number' sortable='custom' min-width="200"> </el-table-column>
      <!-- <el-table-column show-overflow-tooltip label="案件名称" align="left" prop='patent_name' sortable='custom' min-width="160"> </el-table-column>
      <el-table-column show-overflow-tooltip label="专利类型" align="left" prop='type' sortable='custom' min-width="160"> </el-table-column>
      <el-table-column show-overflow-tooltip label="扣款金额(元)" align="left" prop='deduction_price' sortable='custom' min-width="140"> </el-table-column>
      <el-table-column show-overflow-tooltip label="扣款原因" align="left" prop='name' sortable='custom' min-width="160"> </el-table-column> -->
      <el-table-column show-overflow-tooltip label="代理人" align="left" prop='agent' sortable='custom' min-width="130"> </el-table-column>
      <el-table-column show-overflow-tooltip label="流程人员" align="left" prop='process' sortable='custom' min-width="130"> </el-table-column>
      <el-table-column show-overflow-tooltip label="案件撰写超时(天)" align="left" prop='write_overtime' sortable='custom' min-width="160">
        <template slot-scope="scope">
          <span :class="scope.row.write_overtime != 0 ? 'font_danger' : ''">{{ scope.row.write_overtime }}</span>
        </template>
      </el-table-column>
      <el-table-column show-overflow-tooltip label="案件返修超时(天)" align="left" prop='rework_overtime' sortable='custom' min-width="160">
        <template slot-scope="scope">
          <span :class="scope.row.rework_overtime != 0 ? 'font_danger' : ''">{{ scope.row.rework_overtime }}</span>
        </template>
      </el-table-column>
      <el-table-column show-overflow-tooltip label="发送定稿文件超时(天)" align="left" prop='send_final_document_overtime' sortable='custom' min-width="190">
        <template slot-scope="scope">
          <span :class="scope.row.send_final_document_overtime != 0 ? 'font_danger' : ''">{{ scope.row.send_final_document_overtime }}</span>
        </template>
      </el-table-column>
      <el-table-column show-overflow-tooltip label="确认定稿超时(天)" align="left" prop='finalizing_overtime' sortable='custom' min-width="160">
        <template slot-scope="scope">
          <span :class="scope.row.finalizing_overtime != 0 ? 'font_danger' : ''">{{ scope.row.finalizing_overtime }}</span>
        </template>
      </el-table-column>
      <el-table-column show-overflow-tooltip label="上报上传文件超时(天)" align="left" prop='upload_report_file_overtime' sortable='custom' min-width="190">
        <template slot-scope="scope">
          <span :class="scope.row.upload_report_file_overtime != 0 ? 'font_danger' : ''">{{ scope.row.upload_report_file_overtime }}</span>
        </template>
      </el-table-column>
      <el-table-column show-overflow-tooltip label="答复超时(天)" align="left" prop='reply_timeout' sortable='custom' min-width="140">
        <template slot-scope="scope">
          <span :class="scope.row.reply_timeout != 0 ? 'reply_timeout' : ''">{{ scope.row.reply_timeout }}</span>
        </template>
      </el-table-column>
      <!-- <el-table-column show-overflow-tooltip label="扣款时间" align="left" prop='created_at' sortable='custom' min-width="160"> </el-table-column> -->
    </el-table>

    <pagination @paginationChange="paginateChange" :total="total"></pagination>

    <xy-excel-export-template ref="TerminalExportExcel"></xy-excel-export-template>
  </div>
</template>

<script>

import Pagination from '~/components/pagination'
import tableSearch from '~/components/tableSearch'
import xyExcelExportTemplate from "~/components/ExcelExportTemplate";
export default {
  data () {
    return {
      tableData: [],
      loading: false,
      pageSize: 25, //一页可以几条
      pageSizes: [25, 50], //一页可以几条,
      currentPage: 1, //目前在第几页
      current_page: 0,
      tableSize: 25, //一页几条
      total: 0,
      paramsByabnormal: {
        // user_type: 1,
      },
      myInfo: {
        drawing_agent_check : 0
      },
      selectHead: [
        {
          label: '订单编号',
          props: 'order_number'
        },
        {
          label: '代理人',
          props: 'agent_id'
        },
        {
          label: '流程人员',
          props: 'process_id'
        },
        {
          label: '扣款原因',
          props: 'name'
        },
        {
          label: '扣款金额',
          props: 'deduction_price'
        },
        // {
        //   label: '扣款时间',
        //   props: 'created_at'
        // },

      ],
      search_params: {}
    }
  },
  components: {
    Pagination,
    tableSearch,
    xyExcelExportTemplate
  },
  created () {
    this.getTableData()
  },
  methods: {

    getTableData (args) {
      let params = {
        perPage: this.pageSize,
        page: this.currentPage,
      }
      params = {...params, ...this.paramsByabnormal, ...this.search_params}
      if (args) {
        params = {...params, ...args}
      }
      this.$axios.get('api/deduction/unusual_list', {
        params: params
      }).then(res => {
        if (res.data.code == 200) {
          this.loading = false
          this.tableData = res.data.data
          this.pageSize = res.data.page.per_page
          this.total = res.data.page.total
           // 重绘表格解决错位问题
          this.$nextTick(()=>{
            this.$refs.tableRef.doLayout()
          })
          // this.getMyinfo()
        } else {
          this.$message.error('服务器繁忙')
        }
      })
    },
    searchMethods(params, no_search) {
      // this.sort_params = {}
      this.currentPage = 1
      this.pageSize = 25
      this.search_params = params
      if (!no_search) {
          this.getTableData()
      }
    },
    paginateChange(params) {
      this.pageSize = params.perPage
      this.currentPage = params.page
      this.getTableData()
    },
    tableSortChange (column) {
      if (column.order === 'descending') {
        this.paramsByabnormal.sort_str = column.prop
        this.paramsByabnormal.sort_order = 'desc'
      } else if (column.order === 'ascending'){
        this.paramsByabnormal.sort_str = column.prop
        this.paramsByabnormal.sort_order = 'asc'
      } else {
        delete this.paramsByabnormal.sort_str
        delete this.paramsByabnormal.sort_order
      }
      this.loading = true
      this.currentPage = 1
      this.getTableData()
    },
    //导出excel
    exportExcel(name) {
      let tabHandle = [
        "订单编号",
        "代理人",
        "流程人员",
        "案件撰写超时(天)",
        "案件返修超时(天)",
        "发送定稿文件超时(天)",
        "确认定稿超时(天)",
        "上传上报文件超时(天)",
        "答复超时(天)",
      ];
      let params = {
        allPage: 2
      }
      this.getTableData(params)
      if (this.tableData.length) {
        let exTableData = []
        let item = {}
        for (let i in JSON.parse(JSON.stringify(this.tableData))) {
          item = this.tableData[i]
          exTableData.push(item);
        }
        this.$refs.TerminalExportExcel.exportExcelAbonormal(name, tabHandle, exTableData);
      }
    },
  }
}
</script>

<style lang='less' type='text/css' scoped>
  .abnormalData {
    height: 100%; //撑满表格
    .withdraw-header {
      margin-bottom: 20px;
    }
    .el-table {
      width: 99.9% !important;
    }
  }
</style>
